<template>
    <div class="page-bg">
      <div class="edit-page">
        <div class="item">
          <div class="label">标题:</div>
          <el-input
            placeholder="请输入"
            maxlength="100"
            v-model="pageData.title"
            show-word-limit
          />
        </div>
  
        <div class="item">
          <div class="label">图片-单张:</div>
          <formImg
            width="200"
            v-model="pageData.img"
            @pickImg="pickImg('img')"
          />
        </div>
  
        <div class="item">
          <div class="label">图片-最多3张-可以拖拽排序:</div>
          <formImg
            v-model="pageData.imgList"
            @pickImg="pickImg('list', $event)"
            :max="3"
          />
        </div>
  
        <div class="item">
          <div class="label">富文本编辑器:</div>
          <editor ref="editorRef" @selectImg="pickImg('editor')" />
        </div>
  
        <div
          class="footer flex"
          :class="{
            false: sysStore.isCollapse,
          }"
        >
          <el-button type="primary" @click="subForm">确定</el-button>
          <el-button>取消</el-button>
        </div>
      </div>
  
      <layerImg v-model="imgOption.show" @getImg="getImg" />
    </div>
  </template>
  
  <script lang="ts">
  export default {
    name: "ShiftCreate",
  };
  </script>
  
  <script setup lang="ts">
  import { useSysStore } from "@/store/sys";
  import { layerImg, formImg, useImgHook } from "@/components/formImg";
  import editor from "@/components/editor/index.vue";
  import { ElMessage } from "element-plus";
  import config from "@/common/config";
  
  const sysStore = useSysStore();
  
  const pageData = reactive<any>({
    title: "",
    imgList: ['other/verify1.jpg'],
    img: "",
  });
  
  const editorRef = ref<any>(null);
  
  onMounted(() => {
    //编辑器默认值
    editorRef.value.content = "<h2>点击左上角图片按钮插入图片试试~</h2>";
  });
  
  const { imgOption, pickImg } = useImgHook();
  
  function getImg(data: any) {
    console.log(data,111)
  
    //多图上传
    if (imgOption.option.name === "list") {
      if (imgOption.option.index != -1) {
        pageData.imgList[imgOption.option.index] = data.imgUrl;
      } else {
        pageData.imgList.push(data.imgUrl);
      }
    }
    //单图上传
    if (imgOption.option.name === "img") {
      pageData.img = data.imgUrl;
    }
    //编辑器图片上传
    if (imgOption.option.name === "editor") {
      editorRef.value.editorObj.execCommand(
        "inserthtml",
        `<p><img style='max-width:100%' src='${config.qnUrl}${data.imgUrl}'/></p>`
      );
    }
  }
  //提交
  function subForm() {
    ElMessage.warning("该功能需要自行开发");
    console.log("详情", editorRef.value.content);
  }
  </script>
  
  <style lang="scss" scoped>
  .item {
    margin-bottom: 20px;
  }
  
  .label {
    line-height: 30px;
  }
  
  .edit-page {
    padding-bottom: 50px;
  }
  .footer {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    width: 100%;
    padding: 10px 20px;
    position: fixed;
    left: 200px;
    bottom: 0px;
    justify-content: flex-start;
    background: #fff;
    z-index: 2000;
    &.false {
      left: 64px;
    }
    .el-button {
      width: 100px;
    }
  }
  html.dark {
    .footer {
      background: #000;
    }
  }
  </style>
  